<template>
  <div class="home">
    <!-- 导航栏、搜索框、轮播图 -->
    <div class="search">
      <van-search
        @click="search"
        v-model="value"
        placeholder="商品搜索，共238款好物"
        input-align="center"
      />
      <van-swipe
        class="my-swipe"
        :autoplay="3000"
        indicator-color="white"
        style="height: 200rem"
      >
        <van-swipe-item v-for="(item, index) in banner" :key="index">
          <img :src="item.url" alt="" style="width: 100%; height: 100%" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <!-- 二级分类 -->
    <div class="classify">
      <div
        class="classifys"
        v-for="(item, index) in channel"
        :key="index"
        @click="classvalue(item.id)"
      >
        <img :src="item.iconUrl" alt="" />
        <p>{{ item.name }}</p>
      </div>
    </div>
    <!-- 优惠券 -->
    <div class="coupon">
      <p style="font-size: 20rem; padding-top: 20rem; padding-bottom: 15rem">
        优惠券
      </p>

      <div class="coupons" style="width: 100%">
        <div class="coupons1" v-for="(item, index) in couponlist" :key="index">
          <div class="coupons1text1">
            <p>{{ item.tag }}</p>
            <p>{{ item.discount }}元</p>
            <p>满{{ item.min }}元使用</p>
          </div>
          <div class="coupons1text2">
            <p>限时满减券</p>
            <p>{{ item.desc }}</p>
            <p>有效期： {{ item.days }}天</p>
          </div>
        </div>
      </div>
    </div>
    <!-- 品牌商模块 -->
    <div class="brand">
      <p style="background-color: #fff; padding-bottom: 15rem">
        品牌制造商直供
      </p>
      <div class="brands">
        <div
          v-for="(item, index) in brandList"
          :key="index"
          :style="{
            backgroundImage: 'url(' + item.picUrl + ')',
            backgroundRepeat: 'no-repeat',
            backgroundSize: 'cover',
            width: '49%',
            height: '200rem',
          }"
          @click="puthbrand(item.id)"
        >
          <p>{{ item.name }}</p>
          <p style="font-size: 18rem; padding-top: 3rem">
            {{ item.floorPrice }}元起
          </p>
        </div>
      </div>
    </div>
    <!-- 新品首发模块 -->
    <div class="starting">
      <p style="padding-top: 20rem; margin-top: 10rem">周一周四·新品首发</p>
      <div class="startings">
        <div
          v-for="(item, index) in newGoodsList"
          :key="index"
          @click="routervalue(item.id)"
        >
          <img :src="item.picUrl" alt="" />
          <p>{{ item.name }}</p>
          <p style="font-size: 18rem; color: #ac9561">
            ¥ {{ item.retailPrice }}
          </p>
        </div>
      </div>
    </div>
    <!-- 人气推荐模块 -->
    <div class="recommend">
      <p class="recommendtile">人气推荐</p>
      <div class="recommends">
        <div
          style="
            border-top: 1.5rem solid #c9c9c9;
            width: 98%;
            margin-left: 2rem;
          "
          v-for="(item, index) in hotGoodsList"
          :key="index"
          @click="routervalue(item.id)"
        >
          <img :src="item.picUrl" alt="" />
          <div>
            <p>{{ item.name }}</p>
            <p>{{ item.brief }}</p>
            <p>¥ {{ item.retailPrice }}</p>
          </div>
        </div>
      </div>
    </div>
    <!-- 专题精选模块 -->
    <div class="special">
      <p style="padding-bottom: 15rem" class="specialtitle">专题精选</p>
      <div class="specials">
        <div
          v-for="(item, index) in topicList"
          :key="index"
          @click="routervalue(item.id)"
        >
          <img :src="item.picUrl" alt="" />
          <p class="specialstext">{{ item.title }}</p>
          <p class="specialstext1">¥ {{ item.price }}元起</p>
          <p class="specialstext2">{{ item.subtitle }}</p>
        </div>
      </div>
    </div>
    <!--商品三级分类 -->
    <div class="classify2">
      <div
        class="classifys2"
        v-for="(item, index) in floorGoodsList"
        :key="index"
      >
        <p
          style="padding-top: 10px; padding-bottom: 10px"
          class="classifys2title"
        >
          {{ item.name }}
        </p>
        <div class="classifys2s">
          <div
            v-for="(value, key) in item.goodsList"
            :key="key"
            @click="routervalue(item.id)"
          >
            <img :src="value.picUrl" alt="" />
            <p class="classifys2stext1">{{ value.name }}</p>
            <p class="classifys2stext2">¥ {{ value.retailPrice }}</p>
          </div>
          <p class="classifys2smore">更多{{ item.name }}好物 ></p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { service } from "../api/config";
export default {
  name: "homeview",
  data() {
    return {
      banner: [],
      channel: [],
      couponlist: [],
      brandList: [],
      newGoodsList: [],
      hotGoodsList: [],
      topicList: [],
      floorGoodsList: [],
      value: "",
      isFavorite:false
    };
  },
  methods: {
    search() {
      this.$router.push("/search");
    },
    routervalue(id) {
      this.$store.commit("setValueDetail", id);
      this.$router.push("/shopping");
      // 保存到本地存储中
      localStorage.setItem("favorite", JSON.stringify(this.isFavorite));

    },
    puthbrand(id) {
      this.$router.push({
        path: "/brand",
        query: {
          id,
        },
      });
    },
    classvalue(id) {
      console.log(id);
      this.$router.push({
        path: "/subcategories",
        query: {
          id,
        },
      });
    },
  },

  mounted() {
    service.get("/wx/home/index").then((res) => {
      this.banner = res.data.data.banner;
      this.channel = res.data.data.channel;
      this.couponlist = res.data.data.couponList;
      this.brandList = res.data.data.brandList;
      this.newGoodsList = res.data.data.newGoodsList;
      this.hotGoodsList = res.data.data.hotGoodsList;
      this.topicList = res.data.data.topicList;
      this.floorGoodsList = res.data.data.floorGoodsList;
    });
  },
};
</script>

<style scoped>
@import url(@/assets/css/HomeView.css);
</style>